<template>
  <!-- 开始时间 和结束时间选择器，可以选时分秒  -->
  <div class="topnav-content hw">
    <DatePicker
      type="datetimerange"
      v-model="selectTime"
      :options="dateOptions"
      placement="bottom-end"
      separator="->"
      :placeholder="placeholder"
      @on-change="change"
      format="yyyy-MM-dd HH:mm:ss"
      style="width: 100%">
    </DatePicker>
  </div>
</template>
<script>
export default {
  name: "DateTimeRangeSelect",
  props: {
    selectValue: {type: Array,default: () => []},
    placeholder: {type: String,default: ()=>{this.$t("select_date")}}
  },
  watch:{
    selectValue(val){
      if (!!val && val.length == 2){
        this.selectTime = val;
      }
    }
  },
  // v-model
  model:{
    prop: 'selectValue',//返回值
    event: "dataChange" //事件，当选择时间后触发
  },
  data() {
    return {
      selectTime: [],
      dateOptions: {
        shortcuts: [
          {
            text: this.$t('today'),
            value() {
              const end = new Date();
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              const start = new Date();
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              return [start, end];
            }
          },
          {
            text: this.$t('yesterday'),
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              return [start, end];
            }
          },
          {
            text: this.$t('last_three_days'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              return [start, end];
            }
          },
          {
            text: this.$t('last_week'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              return [start, end];
            }
          },
          {
            text: this.$t('last_month1'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              return [start, end];
            }
          },
          {
            text: this.$t('last_three_months'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              return [start, end];
            }
          },
          {
            text: this.$t('last_year'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(59);
              end.setMilliseconds(999);
              return [start, end];
            }
          }
        ]
      }
    }
  },
  methods:{
    change(){
      this.$emit('dataChange', this.selectTime);
    },
    setTime(rangeDate){
      /** 每日的开始时间和结束时间*/
      rangeDate[0].setHours(0);
      rangeDate[0].setMinutes(0);
      rangeDate[0].setSeconds(0);
      rangeDate[0].setMilliseconds(0);

      rangeDate[1].setHours(23);
      rangeDate[1].setMinutes(59);
      rangeDate[1].setSeconds(59);
      rangeDate[1].setMilliseconds(999);
      return rangeDate;
    }
  }

}
</script>
<style lang="less">
@import "./topnav";
.hw{
  height: 32px;
}
</style>
